<template>
    <div class="container" style="background:white">
        <div class="row">
            <div class="col-md-12">
                <header>
                    <h1>小微博客</h1>
                </header>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <!--导航-->
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#" onclick="location.href='List'">首页</a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li ><a href="#" onclick="location.href='Attention'">关注的人<span class="sr-only">(current)</span></a></li>
                                <li ><a href="#" onclick="location.href='AddWeibo'">写微博</a></li>
                            </ul>
                            <form class="navbar-form navbar-left" @submit.prevent="findlist(txt)">
                                <div class="form-group">
                                    <input type="text" class="form-control" v-model="txt" placeholder="标题文字">
                                </div>
                                <button type="submit" class="btn btn-default" >搜索</button>
                            </form>
                            <ul class="nav navbar-nav navbar-right">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                        aria-haspopup="true" aria-expanded="false">我的空间<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" @click="toLoginName(name)">我写的微博</a></li>
                                        <li><a href="#" @click="toMyComment()">我的评论</a></li>
                                        <li><a href="#" @click="toAttention()">我的关注</a></li>

                                    </ul>
                                </li>
                                <!-- <li><button type="button" class="btn btn-default navbar-btn">登陆</button></li> -->
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
                <!--END导航-->
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-2 col-md-8 col-sm-12">
                <h2>写微博</h2>
                <!--表单-->
                <form class="form-horizontal" @submit.prevent="submitWeibo">
                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">标题</label>
                        <div class="col-sm-10">
                            <input v-model="title" name="title" id="title" type="text" class="form-control" rows="3">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="photo" class="col-sm-2 control-label">图片</label>
                        <div class="col-sm-10">
                            <input type="file" id="photo" @change="handleFileUpload">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="content" class="col-sm-2 control-label">内容</label>
                        <div class="col-sm-10">
                            <textarea v-model="content" name="content" id="content" class="form-control"
                                rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">提交</button>
                        </div>
                    </div>
                </form>
                <!--END表单-->
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <!--面板-->
                <div class="panel panel-default" style="margin-top:10px">
                    <div class="panel-body text-center">
                        速联办公 sulan.cn<br />
                        Designed by fan wu
                    </div>
                </div>
                <!--END 面板-->
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { reactive, toRefs, onMounted } from "vue";
import { getSessionStorage, setSessionStorage } from "@/common";

export default {
    setup() {
        const state = reactive({
            user: null,
            title: '',
            content: '',
            photo: null
        });

        onMounted(() => {
            // 使用 getSessionStorage 获取用户信息
            const userData = getSessionStorage('user');
            console.log(userData)
            if (userData) {
                state.user = userData;
            }
        });

        const handleFileUpload = (event) => {
            state.photo = event.target.files[0];
        };

        const submitWeibo = () => {
            if (!state.user) {
                alert('用户未登录，请先登录');
                return;
            }
            const formData = new FormData();
            formData.append('userName', state.user.loginName); // 确保字段名与后端一致
            formData.append('title', state.title);
            formData.append('content', state.content);
            formData.append('photo', state.photo);
            axios.post('http://localhost:81/xw01/xw-weibo/api/weibo/addWeibo', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })
                .then(response => {
                    console.log(response.data);
                    if (response.data.code === 200) {
                        alert('微博发布成功');
                    } else {
                        alert('微博发布失败: ' + response.data.message);
                    }
                })
                .catch(error => {
                    console.error(error);
                    alert('服务器错误');
                });
        };

        return {
            ...toRefs(state),
            handleFileUpload,
            submitWeibo
        };
    }
};
</script>